<template>
    <div class="wh-100" style="background-color:#fff;">
        <!--头部-->
        <div class="d-flex-between-center px-20" style="height: 50px;border-bottom: 1px solid #eaeef5">
            <div style="color:#2d2d2d;font-size: 16px;font-weight: bold">展位分配</div>
            <Button @click="$router.back()">返回</Button>
        </div>
        <!--搜索&展位配置按钮-->
        <div class="px-20 mt-12 d-flex-between-center">
            <div class="d-flex align-items-center">
              <div class="boothSetup-btn ml-12" @click="automaticAllocation">自动分配</div>
                <Poptip v-model="visible" placement="right-start">
                    <Icon type="ios-help-circle-outline" size="18"/>
                    <div slot="title"><i>自动分配</i></div>
                    <div slot="content">
                        <div>待定...</div>
                        <div class="d-flex justify-content-end mt-12">
                            <Button style="height: 25px;font-size: 14px;text-align: center;background-color:#004cce;color: #FFF" @click="visible = false">确定</Button>
                        </div>
                    </div>
                </Poptip>

            </div>
            <div class="d-flex align-items-center ml-12">
              <el-Select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.unitIndustry" style="width:240px" class="mr-12" placeholder="行业">
                <el-option value="全部" label="全部行业"></el-option>
                <el-option
                    v-for="item in industrySelection"
                    :key="item.value"
                    :label="item.title"
                    :value="item.title">
                </el-option>
              </el-Select>
              <el-Select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.unitQuality" style="width:180px" class="mr-12" placeholder="性质">
                <el-option value="全部" label="全部性质"></el-option>
                <el-option
                    v-for="item in natureSelection"
                    :key="item.value"
                    :label="item.title"
                    :value="item.title">
                </el-option>
              </el-Select>
              <el-Select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.employeeNumber" style="width:180px" class="mr-12" placeholder="规模">
                <el-option value="全部" label="全部规模"></el-option>
                <el-option value="少于50人">50人以下</el-option>
                <el-option value="50-100人">50-100人</el-option>
                <el-option value="150-500人">100-500人</el-option>
                <el-option value="500-1000人">500-1000人</el-option>
                <el-option value="1000-5000人">1000-5000人</el-option>
                <el-option value="1000-5000人">5000人以上</el-option>
              </el-Select>
                <Input style="width: 300px"  v-model="pageParams.enterpriseName" search enter-button="搜索" placeholder="用人单位名称" @on-search="search"/>

            </div>

        </div>
    <!--表格-->
        <div v-ref-height="abca" style="height: calc(100% - 170px)" class="mt-12 px-12">

          <el-table
              class="overflow-auto-hidden"
              :height="abca.value"
              :data="tableData"
              empty-text="暂无数据">

            <el-table-column
                prop="boothNumber"
                label="展位号"
                align="center">
              <template slot-scope="scope">
                <el-input
                    placeholder = "输入展位号"
                    v-model = "scope.row.boothNumber"
                    style="width: 100px"
                    type="number"
                    @blur="tableSort(scope.row)"
                    @change="tableSortChange(scope.row,scope.$index)"
                ></el-input>
<!--                <InputNumber-->
<!--                    v-model="scope.row.boothNumber"-->
<!--                    style="width: 100px"-->
<!--                    type="number"-->
<!--                    placeholder="输入序号"-->
<!--                    @on-change="tableSortChange(row,index)"-->
<!--                    @on-blur="tableSort()"-->
<!--                    :min="1"-->
<!--                ></InputNumber>-->
              </template>
            </el-table-column>
            <el-table-column
                prop="enterpriseName"
                label="单位名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="positionNumber"
                label="职位数"
                align="center">
            </el-table-column>
            <el-table-column
                prop="unitIndustry"
                label="所属行业"
                align="center">
            </el-table-column>
            <el-table-column
                prop="unitQuality"
                label="单位性质"
                align="center">
            </el-table-column>
            <el-table-column
                prop="employeeNumber"
                label="规模"
                align="center">
            </el-table-column>
          </el-table>
<!--            <Table class="overflow-auto-hidden" :height="abca.value" :columns="tableColumnstableColumns" :data="tableData" :no-data-text="`<img class='noImgUrl' src=${noImgUrl} /><div class='noImgUrlText'>暂无数据<div>`">>-->
<!--                <template slot-scope="{row,index}" slot="name1">-->
<!--                  <InputNumber-->
<!--                      v-model="row.boothNumber"-->
<!--                      style="width: 100px"-->
<!--                      type="number"-->
<!--                      placeholder="输入序号"-->
<!--                      @on-change="tableSortChange(row,index)"-->
<!--                      @on-blur="tableSort()"-->
<!--                      :min="1"-->
<!--                  ></InputNumber>-->
<!--                </template>-->
<!--            </Table>-->
            <div class="w-100  fs-14 d-flex-center" style="height: 70px;background-color:#fff;">
                <Page :total="pageTotal"
                      :page-size="pageParams.pageSize"
                      :current="pageParams.pageNumber"
                      show-elevator show-sizer
                      class-name="d-flex-center"
                      size="small"
                      @on-change="changePage"
                      @on-page-size-change="changePageSize"
                />
            </div>
        </div>

    </div>
</template>
<script>
import {getBoothPageAPI, assignBoothAPI, autoAllocationAPI} from "../../../api/bys/recruitmentManagement/index"
// region TODO 表格
import {getIndustryAPI,getNatureAPI} from "../../../api/bys/index"
const tableColumns = [
    {
        title: '展位号',
        slot:'name1'
    },
    {
        title: '单位名称',
        key: 'enterpriseName'
    },
    {
        title: '职位数',
        key: 'positionNumber'
    },
    {
        title: '所属行业',
        key: 'unitIndustry'
    },
    {
        title: '单位性质',
        key: 'unitQuality'
    },
    {
        title: '规模',
        key: 'employeeNumber'
    },
]
const tableData = []
// endregion

export default {
    data() {
        return {
            visible:false,
            tableColumns,
          industrySelection:[],//行业
          natureSelection:[],//性质
            tableData,
            abca: {
                value: 0
            },
            pageTotal:'',
            pageParams:{
              pageSize: 10,
              pageNumber: 1,
              doubleElectionId:'',
              enterpriseName:'',//企业名称
              unitIndustry:'全部',//所属行业
              unitQuality:'全部',//单位性质
              employeeNumber:'全部',//员工数量（规模）
            },
            postParams:{
              boothNumber:'',//展位号
              ShDoubleUnitBoothId:'',//展位之间id
              doubleElectionId:''
            }
        }
    },
    mounted() {
    this.pageParams.doubleElectionId = this.$route.query.id
      this.getList()
      this.getIndustry()
      this.getNature()
  },
    methods: {

      search() {
        this.getList()
      },
      getList() {
        getBoothPageAPI(this.pageParams).then((res) => {
          if (res.success){
            console.log(res.result,'展位分配')
            this.pageTotal = res?.result?.total || 0
            this.tableData = res?.result?.records || []
          }else{
          }


        })
      },
        addSite() {
            this.$router.push({
                name:'AddSite'
            })
        },
        tableSort(row){
          console.log('blur')

          this.tableData.sort((a,b) => {
            return (b.boothNumber!= '' && b.boothNumber!= null) - (a.boothNumber!= '' && a.boothNumber!= null) || a.boothNumber - b.boothNumber;
          })
          this.postParams.boothNumber = row.boothNumber
          this.postParams.ShDoubleUnitBoothId = row.id
          this.postParams.doubleElectionId = row.doubleElectionId

        },
      tableSortChange(row,index){
        console.log(row,'aaaaaaaa')
        console.log(index,'bbbbbbb')
        this.tableData[index].boothNumber = row.boothNumber
        this.postParams.boothNumber = row.boothNumber
        this.postParams.ShDoubleUnitBoothId = row.id
        this.postParams.doubleElectionId = row.doubleElectionId
        assignBoothAPI(
            this.postParams).then((res) => {
        })

      },
        // tableSortChange(row,index){
        //   console.log(row,'aaaaaaaa')
        //   console.log(index,'bbbbbbbb')
        //   this.tableData[index].boothNumber = row.boothNumber
        //   this.postParams.boothNumber = row.boothNumber
        //   this.postParams.ShDoubleUnitBoothId = row.id
        //
        // },
      // 自动分配
      automaticAllocation(){
        autoAllocationAPI({shDoubleElectionId:this.$route.query.id}).then((res) => {
          if (res.success){
            this.$message.success(res.message)
            this.getList()
          }
        })
      },
      // region TODO 单位性质
      getNature() {
        getNatureAPI().then((res) => {
          console.log(res,'单位性质')
          this.natureSelection = res.result
        })
      },
      // endregion
      // region TODO 获取行业类别
      getIndustry() {
        getIndustryAPI().then((res) => {
          console.log(res,'行业类别')
          this.industrySelection = res.result
        })
      },
      // endregion

      // region TODO 分页
    changePage(val) {
      this.pageParams.pageNumber = val
      //调接口
      this.getList()

    },
    changePageSize(val) {
      this.pageParams.pageSize = val;
      //调接口
      this.getList()
    },
    // endregion
    }

}
</script>
<style scoped>
.boothSetup-btn {
    font-size: 14px;
    width: 130px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #f3f3f3;
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
}
</style>
